<template>
	<view class="root" :style="{ paddingBottom: `70px` }">
		<view
			:style="{ backgroundImage: `linear-gradient(0deg, #f8faff, #f45455)` }"
			class="pl-20 pr-20"
		>
			<label v-if="homeConfig.address" @click="openLocation" class="f1">
				<uni-icons type="location-filled" color="#fff" />
				<text class="f1 ellipsis color-fff fs-26 ml-8">{{ homeConfig.address.name }}</text>
			</label>

			<swiper
				class="mt-12 br-20 oh"
				:indicator-dots="true"
				:autoplay="true"
				:interval="3000"
				:duration="1000"
				indicator-color="#eee"
				indicator-active-color="#fff"
			>
				<swiper-item
					:style="{ height: `290rpx` }"
					v-for="(img, index) in homeConfig.arr_images"
					:key="index"
				>
					<image class="width-100percent height-100percent bgc-ee5460" :src="img" />
				</swiper-item>
			</swiper>
		</view>

		<view class="fd-row mt-30 flex-wrap">
			<button
				v-for="(nav, key) in navigation"
				:key="key"
				:style="{ width: `25%`, margin: `12rpx 0` }"
				class="ai-center border-none lh-1"
				hover-class="tap-hover"
				@click="navigate(key)"
				:plain="true"
				:open-type="nav.openType"
			>
				<image
					:style="{ width: `90rpx`, height: `90rpx` }"
					:src="`/static/img/icon-${key}.png`"
					mode="aspectFit"
				/>
				<text class="color-333 fs-26 mt-12">{{ nav.title }}</text>
			</button>
		</view>

		<uni-notice-bar
			v-if="homeConfig.notice"
			class="mt-30 ml-20 mr-20"
			showIcon
			scrollable
			single
			backgroundColor="#ffd6d7"
			color="#fe0b0b"
			:speed="60"
			:text="homeConfig.notice"
		/>

		<label class="title lh-100">精品推荐</label>

		<view class="ml-10 mr-10 mt-30 fd-row flex-wrap">
			<navigator
				v-for="(commodity, index) in commodities.list"
				:key="index"
				:url="`/pages/client/CommodityInfo?id=${commodity.id}`"
				class="ml-10 mr-10 mb-30 bgc-fff br-20 oh"
				:style="{ width: `calc((100% - 40rpx) / 2)` }"
				hover-class="none"
			>
				<image
					class="width-100percent bgc-fff"
					:style="{ height: `268rpx` }"
					:src="commodity.cover_image"
					mode="aspectFill"
				/>
				<view class="fw-600" :style="{ padding: `20rpx` }">
					<text class="ellipsis fs-26 color-333">{{ commodity.name }}</text>
					<view class="mt-26 fd-row ai-center jc-sb">
						<text class="color-ef1b1b fs-32">
							￥{{ Number(commodity.price).toFixed(2) }}
						</text>
						<view
							class="br-circle width-48 height-48"
							:style="{
								display: `flex`,
								alignItems: `center`,
								justifyContent: `center`,
								backgroundImage: `linear-gradient(-22deg, #f4a754, #f45455)`,
							}"
							hover-class="tap-hover"
							hover-stay-time="100"
							@click.stop="addShoppingCart(commodity.id)"
						>
							<uni-icons type="plusempty" color="#fff" size="18" />
						</view>
					</view>
				</view>
			</navigator>
		</view>
		<uni-load-more :status="loadStatus" />
		<shopping-cart />
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Pager } from "@/static/type";
	import shoppingCart from "@/components/shoppingCart.vue";

	let requestFlag: boolean = false;
	@Component({ components: { shoppingCart } })
	export default class Home extends Vue {
		// component property
		commodities: Pager<AnyObject> = { page: 1, list: [], size: 18 };
		loadStatus: string = "loading";
		keywords: string = "";
		homeConfig: AnyObject = {};
		navigation: AnyObject = {
			topUp: {
				title: "去充值",
			},
			toPay: {
				title: "去买单",
			},
			pointsMall: {
				title: "积分商城",
			},
			customService: {
				title: "在线客服",
				openType: "contact",
			},
		};
		onLoad() {
			uni.startPullDownRefresh({});
		}
		onShow() {
			this.$store.dispatch("getShoppingCartData");
		}

		onShareAppMessage() {
			return {
				title: "进入客来米小程序",
				path: "/pages/tabs/Home",
			};
		}
		onPullDownRefresh() {
			this.keywords = "";
			this.search();
			this.getPageConfig();
		}
		onReachBottom() {
			this.getListData();
		}

		search() {
			this.commodities.list = [];
			this.commodities.page = 1;
			this.getListData();
		}
		getPageConfig() {
			uni.showNavigationBarLoading();
			this.$request.get("/shop/homeDetail").then(({ data }: AnyObject) => {
				this.homeConfig = data;
				uni.setNavigationBarTitle({
					title: data.store_name || "首页",
					complete: uni.hideNavigationBarLoading,
				});
			});
		}
		getListData() {
			const { $request, commodities } = this;

			if (requestFlag || !commodities.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/shop/homeList", {
					page: commodities.page,
					size: commodities.size,
					keywords: this.keywords,
				})
				.then(({ data }) => {
					commodities.list.push(...data.data);
					commodities.page = data.current_page < data.last_page ? ++data.current_page : 0;
					this.loadStatus = commodities.page ? "more" : "noMore";
					this.loadStatus = "noMore";
				})
				.finally(() => {
					requestFlag = false;
					commodities.page > 1 || uni.stopPullDownRefresh();
				});
		}
		callPhone() {
			uni.makePhoneCall({ phoneNumber: this.homeConfig.phone });
		}
		openLocation() {
			uni.openLocation(this.homeConfig.address);
		}

		addShoppingCart(id: number) {
			uni.showLoading({ title: "Loading...", mask: true });
			this.$request.get("/shop/addCart", { id, num: 1 }).then(({ msg: title }) => {
				this.$store.dispatch("getShoppingCartData");
				uni.showToast({ title });
			});
		}
		navigate(key: string) {
			switch (key) {
				case "topUp":
					uni.navigateTo({ url: "/pages/client/StoreCard" });
					break;
				case "toPay":
					uni.navigateTo({ url: "/pages/client/Pay" });
					break;
				default:
					return;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// scss

	.title {
		color: #f45455;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 2;
		margin: 30rpx 30rpx 0;
		&::before,
		&::after {
			content: "";
			flex: 1;
			height: 6rpx;
		}
		&::before {
			margin-right: 20rpx;
			background-image: linear-gradient(to left, #f45455, #f8faff);
		}
		&::after {
			margin-left: 20rpx;
			background-image: linear-gradient(to right, #f45455, #f8faff);
		}
	}
</style>